<script setup>
const faqList= [
  { question: '商品可以退换货吗？', answer: '在购买后的7天内，如商品无损坏且包装完整，可以申请退换货。'},
  { question: '支持哪些支付方式？', answer: '我们支持微信支付、支付宝支付和银行卡支付。'},
  { question: '商品的质量有保障吗？', answer: '我们的商品都经过严格质量检测，有质量问题可联系客服。'}
]
</script>

<template>
  <div class="faq-title">常见问题</div>
    <div class="faq-container">
      <div class="faq-item" v-for="(question, index) in faqList" :key="index">
        <div class="question">{{ question.question }}</div>
        <div class="answer">{{ question.answer }}</div>
      </div>
    </div>
</template>

<script setup>

</script>

<style scoped lang='scss'>
.faq-title {
      height: 70px;
      background: #FA5566;
      color: #fff;
      font-size: 18px;
      line-height: 70px;
      padding-left: 25px;
      margin-bottom: 10px;
      font-weight: normal;
    }

    .faq-container {
    }

    .faq-item {
      margin-bottom: 10px;
      border-bottom: 1px solid #e9ecef;
      padding-bottom: 10px;
    }

    .question {
      cursor: pointer;
      font-weight: bold;
    }

    .answer {
      margin-top: 5px;
      color: #6c757d;
    }

</style>